import React, { Component } from "react";
import SmoothScroll from "smooth-scroll";

import "../../assets/css/index/index.css";
import { Link } from "react-router-dom";

class Header extends Component {
  componentDidMount() {
    const headerEl = document.querySelector("header");
    const scrollToTop = document.querySelector(".scrollToTop");
    window.addEventListener("scroll", () => {
      let height = headerEl.getBoundingClientRect().height;

      if (window.pageYOffset - height > 500) {
        if (!headerEl.classList.contains("sticky")) {
          headerEl.classList.add("sticky");
        }
      } else {
        headerEl.classList.remove("sticky");
      }

      if (window.pageYOffset > 2000) {
        scrollToTop.style.display = "block";
      } else {
        scrollToTop.style.display = "none";
      }
    });

    const scroll = new SmoothScroll(
      'nav a[href*="#"],.scrollToTop a[href*="#"]',
      {
        header: "header",
        offset: 80,
      }
    );

    document.addEventListener("scrollStart", () => {
      if (headerEl.classList.contains("open")) {
        headerEl.classList.remove("open");
      }
    });

    const exploreBtnEls = document.querySelectorAll(".explore-btn");
    exploreBtnEls.forEach((exploreBtnEl) => {
      exploreBtnEl.addEventListener("click", () => {
        scroll.animateScroll(document.querySelector("#service"));
      });
    });

    //折叠按钮
    const burgerEl = document.querySelector(".burger");
    burgerEl.addEventListener("click", () => {
      headerEl.classList.toggle("open");
    });
  }
  handleAbout = (e) => {
    
  };
  render() {
    return (
      <header>
        <div className="logo">猪猪の宠物店</div>
        <nav>
          <a href="./index.html">首页</a>
          <Link to="/about">关于我们</Link>
          <a href="#showcases">宠物展示</a>
          <a href="#service">服务流程</a>
          <a href="#team-intro">团队介绍</a>
          <Link to="/news">公司动态</Link>
          <i className="fas fa-search"></i>
        </nav>
        <div className="burger">
          <div className="burger-line1"></div>
          <div className="burger-line2"></div>
          <div className="burger-line3"></div>
        </div>
      </header>
    );
  }
}

export default Header;
